<template>
	<view class="page">
		<navbar backIconName="arrow-left" title="认证新企业" :titleStyle="titleStyle"></navbar>
		<scroll-view class="scroll-view_H" scroll-y="true">
			<view :style="{height:statusHeight+'px'}"></view>
			<view class="inCompany-task">
				<view class="task-item">
					<view class="left">
						<view class="top">
							<text style="font-size: 28rpx;color: #1169DB;font-weight: bold;">用户信息</text>
						</view>
						<u-line></u-line>
						<view class="top" style="padding-top: 20rpx;">
							<text class="label-content">姓名</text>
							<text
								style="flex: 1; font-size: 28rpx;color: #666666;">{{userInfo.fontUser.userName || '-'}}</text>
						</view>
						<u-line></u-line>
						<view class="top" style="padding-top: 20rpx;">
							<text class="label-content">身份证号</text>
							<text
								style="flex: 1; font-size: 28rpx;color: #666666;">{{userInfo.fontUser.idNumber || '-'}}</text>
						</view>
						<u-line></u-line>
						<view class="top" style="padding-top: 20rpx;">
							<text class="label-content">手机</text>
							<text
								style="flex: 1; font-size: 28rpx;color: #666666;">{{userInfo.fontUser.mobile || '-'}}</text>
						</view>


					</view>

				</view>

			</view>

			<view class="inCompany-task">
				<view class="task-item">
					<view class="left">
						<view class="top">
							<text style="font-size: 28rpx;color: #1169DB;font-weight: bold;">企业信息</text>
						</view>
						<u--form labelPosition="top" :model="formData" :rules="rules" labelWidth="170"
							:labelStyle="{fontSize:'26rpx',color:'#323232',fontWeight:'bold'}" ref="uForm">
							<u-form-item label="企业/个体工商户名称" prop="companyName" borderBottom>
								<u--input v-model="formData.companyName" placeholder="请输入" border="none"></u--input>
							</u-form-item>
							<u-form-item label="统一社会信用代码" prop="socialCreditNumber" borderBottom>
								<u--input v-model="formData.socialCreditNumber" placeholder="请输入"
									border="none"></u--input>
							</u-form-item>
							<u-form-item label="法定代表人姓名" prop="legalRepresentativeName" borderBottom>
								<u--input v-model="formData.legalRepresentativeName" placeholder="请输入"
									border="none"></u--input>
							</u-form-item>
							<u-form-item label="法定代表人身份证号" prop="idNumber" borderBottom>
								<!-- <u--input v-model="formData.idNumber" type="idcard" maxlength="18" placeholder="请输入"
									border="none"></u--input> -->
								<u--input v-model="formData.idNumber" placeholder="请输入" border="none"></u--input>
							</u-form-item>

							<!-- <u-form-item label="所属行业" prop="phone" borderBottom @click="showType = true;">
								<u--input v-model="formData.phone" disabled disabledColor="#ffffff" placeholder="请选择"
									border="none"></u--input>
								<u-icon slot="right" name="arrow-right"></u-icon>
							</u-form-item>
							<u-form-item label="所属地区" prop="phone" borderBottom
								@click="lotusAddressData.visible = true;">
								<u--input v-model="formData.phone" disabled disabledColor="#ffffff" placeholder="请选择"
									border="none"></u--input>
								<u-icon slot="right" name="arrow-right"></u-icon>
							</u-form-item>
							<u-form-item label="企业规模" prop="phone" borderBottom>
								<u--input v-model="formData.phone" border="none"></u--input>
							</u-form-item> -->
							<!-- <u-form-item label="法人是否为本人" prop="phone" borderBottom @click="showLegalPerson = true;">
								<u--input v-model="formData.phone" disabled disabledColor="#ffffff" placeholder="请选择"
									border="none"></u--input>
								<u-icon slot="right" name="arrow-right"></u-icon>
							</u-form-item>
							<u-form-item label="本人身份证" prop="phone" borderBottom>
								<uploadImage />
							</u-form-item>
							<u-form-item label="法人身份证" prop="phone" borderBottom>
								<uploadImage />
							</u-form-item>
							<u-form-item label="法人身授权委托书" prop="phone">
								<uploadImage />
							</u-form-item> -->

						</u--form>
					</view>
				</view>
			</view>
			<view class="submit-content">
				<u-button type="primary" :loading="registerLoading" :throttleTime="1000" text="提交认证"
					@click="submit"></u-button>
			</view>

		</scroll-view>

		<u-action-sheet :show="showType" :actions="actions" round="12" title="请选择入企类型" @close="showType = false"
			@select="typeSelect">
		</u-action-sheet>

		<!-- 法人是否为本人 -->
		<u-action-sheet :show="showLegalPerson" :actions="legalPersonActions" round="12" title="请选择"
			@close="showLegalPerson = false" @select="legalPersonSelect">
		</u-action-sheet>

		<!-- 省市县三级联动 -->
		<!-- <lotus-address ref="lotus" v-on:choseVal="choseValue" :lotusAddressData="lotusAddressData"></lotus-address> -->

		<!-- loading -->
		<u-overlay :show="registerLoading" :opacity="0.8">
			<view class="warp">
				<text style="font-size: 28rpx;color: #fff;">提交中...</text>
			</view>
		</u-overlay>


		<u-toast ref="uToast"></u-toast>


	</view>
</template>

<script>
	let App = getApp();
	import {
		subAuthenticate,
	} from '@/api/pagesMine'
	import store from '@/store'
	// import lotusAddress from "@/components/Winglau14-lotusAddress/Winglau14-lotusAddress.vue";
	import uploadImage from "@/components/uploadImage/index.vue";
	import {
		checkDate,
		checkProv,
		checkParity,
		checkPhone,
		toast,
		showConfirm,
	} from "@/utils/common.js"
	export default {
		components: {
			// lotusAddress,
			uploadImage,
		},
		data() {
			return {
				statusHeight: 44 + App.globalData.statusBarHeight,
				titleStyle: {
					color: "#ffffff",
					fontWeight: "bold",
					fontSize: "18px"
				},
				formData: {
					companyName: "",
					socialCreditNumber: "",
					legalRepresentativeName: "",
					idNumber: "",
				},
				rules: {
					// companyName: [{
					// 	required: true,
					// 	message: '企业/个体工商户名称',
					// 	trigger: ['blur']
					// }],
					socialCreditNumber: [{
						required: true,
						message: '请输入统一社会信用代码',
						trigger: ['blur']
					}],
					legalRepresentativeName: [{
						required: true,
						message: '请输入法定代表人姓名',
						trigger: ['blur']
					}],
					idNumber: [{
							required: true,
							message: '请输入法定代表人身份证号',
							trigger: ['blur', 'change']
						},
						// {
						// 	// 自定义验证函数
						// 	validator: (rule, value, callback) => {
						// 		var checkID = (value) => {
						// 			if (checkDate(value)) {
						// 				if (checkProv(value.substring(0, 2))) {
						// 					if (checkParity(value)) {
						// 						return true;
						// 					} else {
						// 						return false;
						// 					}
						// 					return true;
						// 				} else {
						// 					return false
						// 				}
						// 			} else {
						// 				return false
						// 			}
						// 		}
						// 		return checkID(value);
						// 	},
						// 	message: '身份证不正确',
						// 	// 触发器可以同时用blur和change
						// 	trigger: ['blur', 'change'],
						// },
					],
				},
				showType: false,
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
					{
						name: '保密',
					},
				],
				lotusAddressData: {
					visible: false,
					provinceName: '',
					cityName: '',
					townName: '',
				},
				showLegalPerson: false,
				legalPersonActions: [{
						name: '是',
					},
					{
						name: '否',
					},
				],
				userInfo: store.state.user.USER_INFO,
				registerLoading: false,
			};
		},
		created() {

		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			/* 提交企业认证 */
			submit() {
				this.$refs.uForm.validate().then(res => {
					// this.registerLoading = true
					let userId = store.state.user.USER_OPENID
					const params = {
						userId: userId,
						companyName: this.formData.companyName ? (this.formData.companyName.trim()) : "",
						socialCreditNumber: this.formData.socialCreditNumber ? (this.formData.socialCreditNumber.trim()) : "",
						legalRepresentativeName: this.formData.legalRepresentativeName ? (this.formData.legalRepresentativeName.trim()) : "",
						idNumber: this.formData.idNumber ? (this.formData.idNumber.trim()) : "",
						mobile: this.userInfo.fontUser.mobile,
					}
					showConfirm('确认要提交企业认证？').then(res => {
						if (res.confirm) {
							subAuthenticate(params).then(res => {
								this.registerLoading = false
								if (res.data.code == '200') {
									this.$refs.uToast.show({
										message: '企业认证成功！',
										position: 'top'
									})
									this.$eventBus.$emit('myAuthentication')
									if (res.data.data.def == '0') {
										this.$store.commit('user/CURRENT_COMPANY_INFO', res.data
											.data)
										let userinfo = JSON.parse(JSON.stringify(store.state.user
											.USER_INFO))
										userinfo.isAuthentication = true
										this.$store.commit('user/COMMIT_USER_INFO', userinfo)
									}
									setTimeout(() => {
										uni.navigateBack()
									}, 1000)
								} else {
									this.$refs.uToast.show({
										message: res.data.msg,
										position: 'top'
									})
								}
							}).catch(res => {
								this.registerLoading = false
							})
						}
					})

				}).catch(errors => {
					this.registerLoading = false
				})
			},
			typeSelect(res) {

			},
			legalPersonSelect(res) {

			},
			// //打开picker
			// openPicker() {
			// 	this.lotusAddressData.visible = true;
			// 	// this.lotusAddressData.provinceName = '河南省';
			// 	// this.lotusAddressData.cityName = '郑州市';
			// 	// this.lotusAddressData.townName = '中原区';
			// },
			// //回传已选的省市区的值
			// choseValue(res) {
			// 	//res数据源包括已选省市区与省市区code
			// 	this.lotusAddressData.visible = res.visible; //visible为显示与关闭组件标识true显示false隐藏
			// 	//res.isChose = 1省市区已选 res.isChose = 0;未选
			// 	if (res.isChose) {
			// 		this.lotusAddressData.provinceName = res.province; //省
			// 		this.lotusAddressData.cityName = res.city; //市
			// 		this.lotusAddressData.townName = res.town; //区
			// 		// this.user.region = `${res.province} ${res.city} ${res.town}`; //region为已选的省市区的值
			// 	}
			// },
		}
	};
</script>

<style lang="scss" scoped>
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.scroll-view_H {
		width: 100%;
		height: 100%;

		.submit-content {
			padding: 30rpx;
			height: 200rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}

		.inCompany-task {
			display: flex;
			flex-direction: column;
			padding: 20rpx;


			.task-item {
				display: flex;
				align-items: center;
				padding: 20rpx 30rpx;
				background-color: #fff;
				border-radius: 12rpx;
				box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);

				.left {
					flex: 1;
					display: flex;
					flex-direction: column;

					.top {
						display: flex;
						padding-bottom: 20rpx;

						.label-content {
							width: 100px;
							font-size: 28rpx;
							color: #323232;
							font-weight: bold;
						}
					}
				}
			}
		}



	}
</style>